<template>
	<view>
		<!-- 订单导航 -->
		<order-nav :tabNavBars="tabNavBars" :activeIndex="activeIndex" navColor="#58c7d1" @changeAct="changeOrderNavAct"></order-nav>

		<!-- 订单列表 -->
		<block v-for="(item, index) in tabNavBars" :key="index">
			<view class="" v-if="index === activeIndex">
				<!-- 无订单显示的内容 -->
				<block v-if="item.list.length === 0">
					<view class="no-order">
						<image :src="item.noOrderImg" mode="" class="no-order-img"></image>
						<view class="no-order-text">{{ item.noOrderTips }}</view>
					</view>
				</block>

				<!-- 对应的订单列表详情 -->
				<block v-else>
					<view v-for="(item2, index2) in item.list" :key="index2">
					{{ item2 }}
					</view>
				</block>
			</view>
		</block>
	</view>
</template>
<script>
// 按需导入 mapState 辅助函数
import { mapState,mapMutations } from 'vuex'
import orderNav from '../../components/order-nav/order-nav.vue';
export default {
	name: 'Order',
	computed: {
	   // 将 m_user 模块中的 userinfo 映射到当前页面中使用
	   ...mapState('m_user', ['userinfo']),
	 },
	data() {
		return {
			// 导航列表,思想啊！是把每种订单状态下对应订单列表直接组织到订单导航列表里了。
			tabNavBars: [
				{
					name: '全部',
					noOrderImg: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875885761,2373220900&fm=26&gp=0.jpg',
					noOrderTips: '您还没有订单哦~',
					list: ['这是全部订单列表']//该订单状态下数据。
				},
				{
					name: '待付款',
					noOrderImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1717329225,2115039553&fm=26&gp=0.jpg',
					noOrderTips: '您还没有待付款订单哦~',
					list: []
				},
				{
					name: '待发货',
					noOrderImg: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1148236422,1147879121&fm=26&gp=0.jpg',
					noOrderTips: '您还没有待发货订单哦~',
					list: ['待收货订单列表']
				},
				{
					name: '待收货',
					noOrderImg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1504800501,1844087668&fm=26&gp=0.jpg',
					noOrderTips: '您还没有待收货订单哦~',
					list: []
				}
			],
			// 全部订单的索引下标 默认显示
			activeIndex: 0,
			//请求状态
			order:{
				status: '',
				userId: '',
			}
		};
	},
	onLoad(options) {
		this.activeIndex = options.index;
		//进入页面加载数据
		this.getOrdersList(this.activeIndex);
	},
	created() {
		//赋值用户id
		this.order.userId = this.userinfo.id;
		console.log('用户id',this.order.userId)
	},
	components: {
		orderNav,
	},
	methods: {
		changeOrderNavAct(index) {
			console.log(index);
			// 改变导航的激活样式根据索引下标
			this.activeIndex = index;
			this.getOrdersList(this.activeIndex);
		},
		//根据订单状态查询订单
		async getOrdersList(index){
			this.order.status = index;
			// if(index === 0){
			// 	this.order.status = null;
			// }
			const { data: res} = await uni.$http.get('/api/public/orders/getOrdersList',this.order)
			if(res.code !== 200){
				return uni.$showMsg('获取订单信息失败！');
			}
			return uni.$showMsg('获取订单信息成功！');
		}
	}
};
</script>
<style lang="scss" scoped>
// 无相关订单的时候
.no-order {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 350rpx;
	.no-order-img {
		margin-top: 20rpx;
		width: 280rpx;
		height: 280rpx;
		border: solid 1rpx #e8e8e8;
	}
	.no-order-text {
		font-size: 20rpx;
		margin-top: 10rpx;
		color: #999999;
	}
}
</style>


